<script setup lang="ts">
	import { ref } from 'vue';
	import { useMemberStore } from '@/stores';
	import { useGuessList } from '@/composables/index'
	import { putMemberUserAPI } from '@/services/profile';
	import { getScanAPI, getUserAPI } from '@/services/hot';
	// 获取屏幕边界到安全区域距离
	const { safeAreaInsets } = uni.getSystemInfoSync()
	// 选项
	const orderTypes = [
		{ url: '/pageMember/settings/settings', text: '设置', icon: 'icon-currency' },
		// { url: '/pages/cart/cart', type: 2, text: '已回复', icon: 'icon-gift' },
		{ url: '/pageMember/Noreply/Noreply', type: 3, text: '已回复', icon: 'icon-check' },
		{ type: 4, url:'/pageMember/Doctor/Doctor',text: '联系医生', icon: 'icon-comment' },
	]
  const randomImages  = [
        'https://th.bing.com/th/id/OIP.8XPu8rZvNw7w9Nbz0gjM3QHaJ3?w=154&h=206&c=7&r=0&o=5&dpr=1.3&pid=1.7'
  ];
	// 获取用户信息
	const memberStore = useMemberStore()
	// const guessRef = ref<yooGuessInstance>()
	// 滚动触底
	const { guessRef, onScrolltolower } = useGuessList()

	const replyInput = ref('');
	const isModalVisible = ref(false);

	//用户列表
	const userList = ref([])
	//储存设备id
	let deviceId = ref()

	// 当前使用者信息
	let currentUser = ref()


	// 通过用户id,以及设备编号切换使用者
	const handleDetailed = async (item : any) => {
		const data = {
			userId: item.userId,
			deviceCode: deviceId.value
		};
		const res = await putMemberUserAPI(data)
		if (res.code == 20000) {
			// 当前切换用户成功
			uni.showModal({
				content: '用户更改使用者成功!',
				showCancel: false
			});

			// 赋值使用者信息
			currentUser.value = item

			//弹框关闭
			isModalVisible.value = false;
		} else {
			// 切换失败
			uni.showModal({
				content: '用户更改使用者失败!',
				showCancel: false
			});
			isModalVisible.value = false;
		}
		console.log('当前', res,)
	}

	// 修改设备使用者
	const onChangeDeviceUser = async () => {
		// 拿取本地储存
		deviceId.value = uni.getStorageSync('scannedDeviceId');
		if (!deviceId.value) {

			uni.switchTab({
				url: '/pages/index/index'
			});
			uni.showModal({
				content: '暂无设备信息，请扫设备编码',
				showCancel: false
			});
		} else {
			// 发送请求
			const res = await getUserAPI(deviceId.value)
			if (res.code == 20000) {
				userList.value = res.data.userDeviceVOList;
				// 打开弹框
				isModalVisible.value = true;
			} else {
				uni.showModal({
					content: '获取用户的信息失败,请检查!',
					showCancel: false
				});
				// 关闭弹框
				isModalVisible.value = false;
			}
			console.log(res, '数据的信息')
		}
	};
	// 关闭弹窗
	const closeModal = () => {
		isModalVisible.value = false;
	}
</script>

<template>
	<scroll-view class="viewport" @scrolltolower="onScrolltolower" scroll-y enable-back-to-top>
		<!-- 个人资料 -->
		<view class="profile" :style="{ paddingTop: safeAreaInsets!.top + 'px' }">
			<!-- 情况1：已登录 -->
			<view class="overview" v-if="memberStore.profile">
				<navigator url="/pageMember/profile/profile" hover-class="none">
					<image class="avatar" mode="aspectFill" src="../static/images/OIP.jpg"></image>
				</navigator>
				<view class="meta">
					<view class="nickname"> {{ memberStore.profile.userName}} </view>
					<navigator class="extra" url="/pageMember/profile/profile" hover-class="none">
						<text class="update">更新头像昵称</text>
					</navigator>
				</view>
			</view>
			<!-- 情况2：未登录 -->
			<view class="overview" v-else>
				<navigator url="/pages/login/login" hover-class="none">
					<image class="avatar gray" mode="aspectFill"
						src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-06/db628d42-88a7-46e7-abb8-659448c33081.png">
					</image>
				</navigator>
				<view class="meta">
					<navigator url="/pages/login/login" hover-class="none" class="nickname">
						未登录
					</navigator>
					<view class="extra">
						<text class="tips">点击登录账号</text>
					</view>
				</view>
			</view>
			<navigator class="settings" url="/pageMember/settings/settings" hover-class="none">
				设置
			</navigator>
		</view>
		<!-- 我的 -->
		<view class="orders">
			<view class="title">
				我的信息
				<navigator class="navigator" url="/pagesOrder/list/list?type=0" hover-class="none">
					查看<text class="icon-right"></text>
				</navigator>
			</view>
			<view class="section">
				<navigator v-for="item in orderTypes" :key="item.type" :class="item.icon" :url="item.url"
					class="navigator" hover-class="none">
					{{ item.text }}
				</navigator>
			</view>

		</view>
		<view class="list-card">
			<view class="list" v-if="memberStore.profile">
				<navigator url="/pageMember/Contact/Contact" hover-class="none" class="item arrow">
					联系人
				</navigator>
			</view>
			<!-- 列表2 -->
			<view class="list">
				<button hover-class="none" class="item arrow" @tap="onChangeDeviceUser">更改设备使用者</button>
				<button hover-class="none" class="item arrow" open-type="openSetting">授权管理</button>
				<button hover-class="none" class="item arrow" open-type="feedback">问题反馈</button>
				<button hover-class="none" class="item arrow" open-type="contact">联系我们</button>
			</view>
			<!-- 列表3 -->
			<view class="list">
				<navigator hover-class="none" class="item arrow" url=" ">关于</navigator>
			</view>
		</view>


	</scroll-view>

	<!-- 	<view class="popup" v-show="isModalVisible">
		啊啊啊
		<view class="popup-content">
			<button class="close-button" @click="closeModal">×</button>
			<input v-model="replyInput" placeholder="请输入设备ID" />
			<button @click="onReply" class="huifu">确定</button>
		</view>
	</view> -->

	<u-popup :show="isModalVisible" mode="bottom" :closeable="true">
		<view style="text-align: center;">用户信息列表</view>


		<view class="">当前使用的用户为:{{currentUser ? currentUser.userName : '无'}}</view>

		<u-list :height="300">
			<u-list-item v-for="(item, index) in userList" :key="index">
				<u-cell :title="item.userName" @click="handleDetailed(item)">
				</u-cell>
			</u-list-item>
		</u-list>
	</u-popup>

</template>

<style lang="scss">
	page {
		height: 100%;
		overflow: hidden;
		background-color: #f7f7f8;
	}

	.viewport {
		height: 100%;
		background-repeat: no-repeat;
		background-color: #f0f0f4;
		// background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/center_bg.png);
		background-size: 100% auto;
	}

	/* 用户信息 */
	.profile {
		margin-top: 20rpx;
		position: relative;

		.overview {
			display: flex;
			height: 120rpx;
			padding: 0 36rpx;
			color: #fff;
		}

		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			background-color: #eee;
		}

		.gray {
			filter: grayscale(100%);
		}

		.meta {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			line-height: 30rpx;
			padding: 16rpx 0;
			margin-left: 20rpx;
		}

		.nickname {
			max-width: 350rpx;
			margin-bottom: 16rpx;
			font-size: 30rpx;
      color: #6B6B6B;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.extra {
			display: flex;
			font-size: 20rpx;
		}

		.tips {
			font-size: 22rpx;
		}

		.update {
			padding: 3rpx 10rpx 1rpx;
			color: #6B6B6B;
			border: 1rpx solid rgba(255, 255, 255, 0.8);
			margin-right: 10rpx;
			border-radius: 30rpx;
		}

		.settings {
			position: absolute;
			bottom: 0;
			right: 40rpx;
			font-size: 30rpx;
			color: #6B6B6B;
		}
	}

	/* 我的订单 */
	.orders {
		position: relative;
		z-index: 99;
		padding: 30rpx;
		margin: 50rpx 20rpx 0;
		background-color: #fff;
		border-radius: 10rpx;
		box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);

		.title {
			height: 40rpx;
			line-height: 40rpx;
			font-size: 28rpx;
			color: #1e1e1e;

			.navigator {
				font-size: 24rpx;
				color: #939393;
				float: right;
			}
		}

		.section {
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding: 40rpx 20rpx 10rpx;

			.navigator,
			.contact {
				text-align: center;
				font-size: 24rpx;
				color: #333;

				&::before {
					display: block;
					font-size: 60rpx;
					color: #ff9545;
				}
			}

			.contact {
				padding: 0;
				margin: 0;
				border: 0;
				background-color: transparent;
				line-height: inherit;
			}
		}
	}


	/**
 * 列表
 */
	/* 列表 */
	.list-card {
		margin: 50rpx 20rpx 0;

		.list {

			padding: 0 20rpx;
			background-color: #fff;
			margin-bottom: 20rpx;
			border-radius: 10rpx;

			.item {
				line-height: 90rpx;
				padding-left: 10rpx;
				font-size: 30rpx;
				color: #333;
				border-top: 1rpx solid #ddd;
				position: relative;
				text-align: left;
				border-radius: 0;
				background-color: #fff;

				&::after {
					width: auto;
					height: auto;
					left: auto;
					border: none;
				}

				&:first-child {
					border: none;
				}

				&::after {
					right: 5rpx;
				}
			}

			.arrow::after {
				content: '\e6c2';
				position: absolute;
				top: 50%;
				color: #ccc;
				font-family: 'erabbit' !important;
				font-size: 32rpx;
				transform: translateY(-50%);
			}
		}
	}




	/* 猜你喜欢 */
	.guess {
		background-color: #f7f7f8;
		margin-top: 20rpx;
	}
</style>
